<template>
  <div style="width: 100%;height: 100%;background-color: #F4F4F4;" >
    <van-nav-bar :title="title" left-text="返回"   @click-left="onClickLeft"/>
    <van-sticky   :offset-top="46">
      <van-row style="background-color: white;padding-bottom: 5px;padding-top: 5px;">
        <van-col span="8">站名</van-col>
        <van-col span="8">雨量</van-col>
        <van-col span="8">所在地</van-col>
      </van-row>
    </van-sticky>
    <div style="width: 100%;height: calc(100vh - 77px);overflow-y: auto;overflow-x: hidden">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData">

        <div v-for="item in tableData" :key="item.STCD">
          <van-row>
            <van-col span="8">{{item.STNM}}</van-col>
            <van-col span="8">{{item.value||0}}</van-col>
            <van-col span="8">{{item.STLC}}</van-col>
          </van-row>
          <van-divider />
        </div>

      </van-list>
    </div>
  </div>
</template>

<script>
    import API from "../../api/api_common";
    import {Notify} from 'vant';

    export default {
        name: "Detail",
        data(){
            return{
                title:"",
                finished: true,
                loading: false,
                tableData:[],
                param:{}
            }
        },
        mounted(){
            this.param= this.$route.params;
            let temp=this.param.row;
            if(temp.indexOf('between')>=0){
                temp=temp.replace('between','').replace('and','~')
            }
            this.title=this.param.time.substring(5)+" "+this.param.type+temp+"mm("+this.param.value+")个"
            this.getData();
        },
        methods: {
            onClickLeft(){
                this.$router.go(-1)
            },
            getData(){
                if(this.param.value){
                    let str='';
                    switch (this.param.type) {
                        case '日雨量':
                            str="MAXD";
                            break;
                        case '当天累计':str="TOTAL";
                            break;
                        case '2天累计':str="TTOAL";
                            break;
                        default:break
                    }
                    API.staticDetail({
                     time:this.param.time,
                        condition:' where '+this.param.sql + " order by " +str+" desc"
                    }).then(res=>{
                        let data=res.recordset;
                        for (let i = 0; i <data.length; i++) {
                            data[i].value=data[i][str];
                            this.tableData=data;
                        }
                    }).catch(err=>{
                        Notify({type: 'danger', message: '获取信息失败'});
                        console.log(err)
                    })
                }
            }
        }
    }
</script>

<style scoped>
  .van-col {
    text-align: center;
  }
</style>
